<template>
  <!-- 新增/修改菜单的弹窗 -->
  <el-drawer :title="dialogTitle" v-model="dialogVisible" size="50%" @close="closeDialog(menuFormRef)">
    <template #title>
      <h3 class="flex items-center">
        <IconView model-value="ele-TrophyBase" :size="20" color="var(--el-color-primary)"></IconView>
        {{ dialogTitle }}
      </h3>
    </template>
    <el-form ref="menuFormRef" :model="formData" :rules="rules" :label-width="formLabelWidth">
      <el-form-item label="岗位名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入岗位名称"></el-input>
      </el-form-item>
      <el-form-item label="岗位标识" prop="code">
        <el-input v-model="formData.code" placeholder="请输入岗位标识"></el-input>
      </el-form-item>
      <el-form-item label="岗位排序" prop="sortOrder">
        <el-input-number style="width: 100%" v-model="formData.sortOrder" :min="0" controls-position="right">
          <template #decrease-icon>
            <el-icon>
              <Minus />
            </el-icon>
          </template>
          <template #increase-icon>
            <el-icon>
              <Plus />
            </el-icon>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="岗位状态" prop="status">
        <el-switch
          v-model="formData.status"
          active-text="正常"
          inactive-text="停用"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="备注" prop="description">
        <el-input type="textarea" resize="none" :rows="8" v-model="formData.description" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" @click="closeDialog(menuFormRef)"> 取消 </el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSave(menuFormRef)"> 保存 </el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="MenuAdd">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { Post } from "@/api/interface/index";

import { addPost, editPost } from "@/api/modules/post";

const emits = defineEmits(["close"]);
const formLabelWidth = "100px";
const dialogTitle = ref("新增岗位");
const dialogVisible = ref(false);
const menuFormRef = ref<FormInstance>();

const submitLoading = ref(false);
const formData = reactive<Post.IPost>({
  name: "",
  code: "",
  sortOrder: 0,
  status: 1,
  description: ""
});

const rules = ref<FormRules<Post.IPost>>({
  name: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入岗位标识", trigger: "blur" }],
  sortOrder: [{ required: true, message: "请输入岗位排序", trigger: "blur" }]
});
const openDialog = async (type = "add", data: any = {}) => {
  dialogTitle.value = type === "edit" ? "修改岗位" : "新增岗位";
  if (type === "edit") {
    console.log(data);
    formData.id = data.id;
    formData.name = data.name;
    formData.code = data.code;
    formData.sortOrder = data.sortOrder;
    formData.status = data.status;
    formData.description = data.description;
  }
  dialogVisible.value = true;
};

const handleSave = (formRef: FormInstance | undefined) => {
  if (!formRef) return;
  submitLoading.value = true;

  formRef.validate(async (valid: boolean) => {
    if (valid) {
      try {
        const saveURL = formData.id ? editPost : addPost;
        await saveURL({
          ...formData,
          sortOrder: Number(formData.sortOrder)
        });
        ElMessage.success("保存成功");
        closeDialog(formRef);
        submitLoading.value = false;
      } catch (error) {
        submitLoading.value = false;
      }
    } else {
      submitLoading.value = false;
    }
  });
};

const closeDialog = (formRef: FormInstance | undefined) => {
  if (!formRef) return;
  formRef.resetFields();
  formData.id = undefined;
  dialogVisible.value = false;
  emits("close");
};
defineExpose({
  openDialog
});
</script>

<style scoped></style>
